<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片上传并及时预览</title>
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
		<link rel="stylesheet" type="text/css" href="css.css"/>
	</head>
	<body>
		<div style="float: left;" class="box">
			<div id="localImag0" class="localImag">
		        <img id="preview0" class="preview"/>
		        <input type="button" value="X" class="close">
		    </div>
		    <div id="localImag1" class="localImag">
		        <img id="preview1" class="preview"/>
		        <input type="button" value="X" class="close">
		    </div>
		    <div id="localImag2" class="localImag">
		        <img id="preview2" class="preview"/>
		        <input type="button" value="X" class="close">
		    </div>
	    </div>
	    <div class="bg" id="bg">
	    	<input type="file" name="doc" id="doc0" class="doc"/>
	    	<input type="file" name="doc" id="doc1" class="doc"/>
	    	<input type="file" name="doc" id="doc2" class="doc"/>
	    </div>
	    <!--<div class="bg">
	    	<input type="file" name="doc" id="doc" onchange="javascript:setImagePreview();" value=""/>
	    </div>
	    <div class="bg">
	    	<input type="file" name="doc" id="doc" onchange="javascript:setImagePreview();" value=""/>
	    </div>-->
	    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
	    <script type="text/javascript" src="jquery.plusupload.js"></script>
	    <script>
	   		var Sys = {};
		    var ua = navigator.userAgent.toLowerCase();
		    var s;
		        (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
		        (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
		        (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
		        (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
		        (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
	    	$("#bg").on("change","input",function(){
	    		var num=$(this).index();
	    		$(this).upload({
	    			ebtn:"#doc"+num,
					eimg:"#preview"+num,
					ediv:"#localImag"+num
	    		});
	    		$(this).hide();
	    	});
	    	$(".localImag").on("mouseover",function(){
	    		$(this).find("input").show();
	    	});
	    	$(".localImag").on("mouseleave",function(){
	    		$(this).find("input").hide();
	    	});
	    	$('.close').on("click",function(){
	    		var btn=$("#bg").children().eq($(this).parent().index());
	    		btn.show();
	    		btn.val("");
	    		if(Sys.ie){
	    			$(this).parent().css({"whidth":"-1","height":"-1","filter":"","display":"none"})
	    		}else{
	    			$(this).prev().css({"whidth":"-1","height":"-1","display":"none"});
	    			$(this).prev().attr("src","");
	    		}
	    	});
		
	    </script>
	</body>
</html>
